Sigma Web Development

🎨 Notes for Lecture 14: Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages. While HTML is used to define content structure, CSS controls how that content appears.

Common Selectors Used

• div – Block container for grouping content
• span – Inline container for styling inline content
• p – Paragraph text content

Applied Styles in This Lecture

div {
    color: blueviolet;
    background-color: lightcoral !important;
    padding: 20px;
}

span {
    color: bisque;
    background-color: darkblue;
    display: flex;
    justify-content: center;
}

p {
    color: aliceblue;
    background-color: darkgoldenrod;
    text-align: center;
}

Explanation of Properties

• color: Sets the text color
• background-color: Sets the background color
• padding: Adds spacing inside the element
• display: flex: Enables flexbox layout
• justify-content: center: Centers child elements horizontally (when using flexbox)
• text-align: center: Centers the text horizontally
• !important: Forces a style to override others

Why Use CSS?

• To separate content (HTML) from presentation (CSS)
• To enable consistent design across multiple pages
• To allow easy theming, updates, and responsive designs

Useful Resources

• MDN Web Docs – CSS
• CodeWithHarry CSS Tutorials